<!DOCTYPE html><html class=split lang=en-US-x-hixie><script src=../link-fixup.js defer=""></script>
<!-- Mirrored from html.spec.whatwg.org/dev/syntax.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 10 Sep 2025 08:36:28 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<meta charset=utf-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><title>HTML Standard, Edition for Web Developers</title><meta content=#3c790a name=theme-color><meta content="light dark" name=color-scheme><link rel=stylesheet href=../../resources.whatwg.org/standard-shared-with-dev.css crossorigin=""><link rel=icon href=https://resources.whatwg.org/logo.svg crossorigin=""><link rel=stylesheet href=styles.css crossorigin=""><script>
   function toggleStatus(div) {
     div.parentNode.classList.toggle('wrapped');
   }
   function setLinkFragment(link) {
     link.hash = location.hash;
   }
  </script><body>
  <script async="" src=search.js></script>
  
  
  <header id=head class="head with-buttons">
   <a href=https://whatwg.org/ class=logo><img width=100 alt=WHATWG crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/logo.svg height=100></a>
   
   <hgroup><h1><a rel=home href=index.html>HTML: The Living Standard</a></h1><p id=dev-edition-h2>Edition for Web Developers — Last Updated <span class=pubdate>10 September 2025</span></hgroup>
   

   <div id=search>
    <input placeholder="Search. Press '/'" autocomplete=off name=query id=query type=search>
    <ol id=results></ol>
   </div>
  </header>

  

  

  

  
  

  
  

  

  <nav><a href=webstorage.html>← 12 Web storage</a> — <a href=index.html>Table of Contents</a> — <a href=named-characters.html>13.2 Named character references →</a></nav><ol class=toc><li><a href=syntax.html#syntax><span class=secno>13</span> The HTML syntax</a><ol><li><a href=syntax.html#writing><span class=secno>13.1</span> Writing HTML documents</a><ol><li><a href=syntax.html#the-doctype><span class=secno>13.1.1</span> The DOCTYPE</a><li><a href=syntax.html#elements-2><span class=secno>13.1.2</span> Elements</a><ol><li><a href=syntax.html#start-tags><span class=secno>13.1.2.1</span> Start tags</a><li><a href=syntax.html#end-tags><span class=secno>13.1.2.2</span> End tags</a><li><a href=syntax.html#attributes-2><span class=secno>13.1.2.3</span> Attributes</a><li><a href=syntax.html#optional-tags><span class=secno>13.1.2.4</span> Optional tags</a><li><a href=syntax.html#element-restrictions><span class=secno>13.1.2.5</span> Restrictions on content models</a><li><a href=syntax.html#cdata-rcdata-restrictions><span class=secno>13.1.2.6</span> Restrictions on the contents of raw text and escapable raw text elements</a></ol><li><a href=syntax.html#text-2><span class=secno>13.1.3</span> Text</a><ol><li><a href=syntax.html#newlines><span class=secno>13.1.3.1</span> Newlines</a></ol><li><a href=syntax.html#character-references><span class=secno>13.1.4</span> Character references</a><li><a href=syntax.html#cdata-sections><span class=secno>13.1.5</span> CDATA sections</a><li><a href=syntax.html#comments><span class=secno>13.1.6</span> Comments</a></ol></ol></ol><h2 id=syntax><span class=secno>13</span> <dfn>The HTML syntax</dfn><a href=#syntax class=self-link></a></h2>

  <p class=note>This section only describes the rules for resources labeled with an <a id=syntax:html-mime-type href=https://mimesniff.spec.whatwg.org/#html-mime-type data-x-internal=html-mime-type>HTML
  MIME type</a>. Rules for XML resources are discussed in the section below entitled "<a id=syntax:the-xhtml-syntax href=xhtml.html#the-xhtml-syntax>The
  XML syntax</a>".</p>


  <h3 id=writing><span class=secno>13.1</span> Writing HTML documents<a href=#writing class=self-link></a></h3>

  

  <p>Documents must consist of the following parts, in the given
  order:</p>

  <ol><li>Optionally, a single U+FEFF BYTE ORDER MARK (BOM) character.<li>Any number of <a href=#syntax-comments id=writing:syntax-comments>comments</a> and <a id=writing:space-characters href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII
   whitespace</a>.<li>A <a href=#syntax-doctype id=writing:syntax-doctype>DOCTYPE</a>.

   <li>Any number of <a href=#syntax-comments id=writing:syntax-comments-2>comments</a> and <a id=writing:space-characters-2 href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII
   whitespace</a>.<li>The <a id=writing:document-element href=https://dom.spec.whatwg.org/#document-element data-x-internal=document-element>document element</a>, in the form of an <code id=writing:the-html-element><a href=semantics.html#the-html-element>html</a></code> <a href=#syntax-elements id=writing:syntax-elements>element</a>.<li>Any number of <a href=#syntax-comments id=writing:syntax-comments-3>comments</a> and <a id=writing:space-characters-3 href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII
   whitespace</a>.</ol>

  <p>The various types of content mentioned above are described in the next few sections.</p>

  <p>In addition, there are some restrictions on how <a href=semantics.html#character-encoding-declaration id=writing:character-encoding-declaration>character encoding declarations</a> are to be serialized, as discussed in the
  section on that topic.</p>

  <div class=note>

   <p><a id=writing:space-characters-4 href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a> before the <code id=writing:the-html-element-2><a href=semantics.html#the-html-element>html</a></code> element, at the start of the
   <code id=writing:the-html-element-3><a href=semantics.html#the-html-element>html</a></code> element and before the <code id=writing:the-head-element><a href=semantics.html#the-head-element>head</a></code> element, will be dropped when the
   document is parsed; <a id=writing:space-characters-5 href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a> <em>after</em> the <code id=writing:the-html-element-4><a href=semantics.html#the-html-element>html</a></code> element
   will be parsed as if it were at the end of the <code id=writing:the-body-element><a href=sections.html#the-body-element>body</a></code> element. Thus, <a id=writing:space-characters-6 href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII
   whitespace</a> around the <a id=writing:document-element-2 href=https://dom.spec.whatwg.org/#document-element data-x-internal=document-element>document element</a> does not round-trip.</p>

   <p>It is suggested that newlines be inserted after the DOCTYPE, after any comments that are
   before the document element, after the <code id=writing:the-html-element-5><a href=semantics.html#the-html-element>html</a></code> element's start tag (if it is not <a href=#syntax-tag-omission id=writing:syntax-tag-omission>omitted</a>), and after any comments that are inside the
   <code id=writing:the-html-element-6><a href=semantics.html#the-html-element>html</a></code> element but before the <code id=writing:the-head-element-2><a href=semantics.html#the-head-element>head</a></code> element.</p>

  </div>

  <p>Many strings in the HTML syntax (e.g. the names of elements and their attributes) are
  case-insensitive, but only for <a href=https://infra.spec.whatwg.org/#ascii-upper-alpha id=writing:uppercase-ascii-letters data-x-internal=uppercase-ascii-letters>ASCII upper alphas</a> and
  <a href=https://infra.spec.whatwg.org/#ascii-lower-alpha id=writing:lowercase-ascii-letters data-x-internal=lowercase-ascii-letters>ASCII lower alphas</a>. For convenience, in this section this
  is just referred to as "case-insensitive".</p>


  <h4 id=the-doctype><span class=secno>13.1.1</span> The DOCTYPE<a href=#the-doctype class=self-link></a></h4>

  <p>A <dfn id=syntax-doctype>DOCTYPE</dfn> is a 
  required preamble.</p>

  <p class=note>DOCTYPEs are required for legacy reasons. When omitted, browsers tend to use a
  different rendering mode that is incompatible with some specifications. Including the DOCTYPE in a
  document ensures that the browser makes a best-effort attempt at following the relevant
  specifications.</p>

  <p>A DOCTYPE must consist of the following components, in this order:</p>

  <ol class=brief><li>A string that is an <a id=the-doctype:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code>&lt;!DOCTYPE</code>".<li>One or more <a id=the-doctype:space-characters href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a>.<li>A string that is an <a id=the-doctype:ascii-case-insensitive-2 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code>html</code>".<li>Optionally, a <a href=#doctype-legacy-string id=the-doctype:doctype-legacy-string>DOCTYPE legacy string</a>.<li>Zero or more <a id=the-doctype:space-characters-2 href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a>.<li>A U+003E GREATER-THAN SIGN character (>).</ol>

  <p class=note>In other words, <code>&lt;!DOCTYPE html></code>, case-insensitively.</p>

  <hr>

  <p>For the purposes of HTML generators that cannot output HTML markup with the short DOCTYPE
  "<code>&lt;!DOCTYPE html></code>", a <dfn id=doctype-legacy-string>DOCTYPE legacy string</dfn> may be inserted
  into the DOCTYPE (in the position defined above). This string must consist of:</p>

  <ol class=brief><li>One or more <a id=the-doctype:space-characters-3 href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a>.<li>A string that is an <a id=the-doctype:ascii-case-insensitive-3 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code>SYSTEM</code>".<li>One or more <a id=the-doctype:space-characters-4 href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a>.<li>A U+0022 QUOTATION MARK or U+0027 APOSTROPHE character (the <i>quote mark</i>).<li>The literal string "<code id=the-doctype:about:legacy-compat><a href=urls-and-fetching.html#about:legacy-compat>about:legacy-compat</a></code>".<li>A matching U+0022 QUOTATION MARK or U+0027 APOSTROPHE character (i.e. the same character as in the earlier step labeled <i>quote mark</i>).</ol>

  <p class=note>In other words, <code>&lt;!DOCTYPE html SYSTEM "about:legacy-compat"></code> or
  <code>&lt;!DOCTYPE html SYSTEM 'about:legacy-compat'></code>, case-insensitively except for the
  part in single or double quotes.</p>

  <p>The <a href=#doctype-legacy-string id=the-doctype:doctype-legacy-string-2>DOCTYPE legacy string</a> should not be used unless the document is generated from
  a system that cannot output the shorter string.</p>



  <h4 id=elements-2><span class=secno>13.1.2</span> Elements<a href=#elements-2 class=self-link></a></h4>

  <p>There are six different kinds of <dfn id=syntax-elements>elements</dfn>: <a href=#void-elements id=elements-2:void-elements>void
  elements</a>, <a href=#the-template-element-2 id=elements-2:the-template-element-2>the <code>template</code> element</a>, <a href=#raw-text-elements id=elements-2:raw-text-elements>raw text
  elements</a>, <a href=#escapable-raw-text-elements id=elements-2:escapable-raw-text-elements>escapable raw text elements</a>, <a href=#foreign-elements id=elements-2:foreign-elements>foreign elements</a>, and
  <a href=#normal-elements id=elements-2:normal-elements>normal elements</a>.</p>

  <dl><dt><dfn id=void-elements>Void elements</dfn><dd><code id=elements-2:the-area-element><a href=image-maps.html#the-area-element>area</a></code>, <code id=elements-2:the-base-element><a href=semantics.html#the-base-element>base</a></code>, <code id=elements-2:the-br-element><a href=text-level-semantics.html#the-br-element>br</a></code>, <code id=elements-2:the-col-element><a href=tables.html#the-col-element>col</a></code>, <code id=elements-2:the-embed-element><a href=iframe-embed-object.html#the-embed-element>embed</a></code>,
   <code id=elements-2:the-hr-element><a href=grouping-content.html#the-hr-element>hr</a></code>, <code id=elements-2:the-img-element><a href=embedded-content.html#the-img-element>img</a></code>, <code id=elements-2:the-input-element><a href=input.html#the-input-element>input</a></code>, <code id=elements-2:the-link-element><a href=semantics.html#the-link-element>link</a></code>, <code id=elements-2:the-meta-element><a href=semantics.html#the-meta-element>meta</a></code>,
   <code id=elements-2:the-source-element><a href=embedded-content.html#the-source-element>source</a></code>, <code id=elements-2:the-track-element><a href=media.html#the-track-element>track</a></code>, <code id=elements-2:the-wbr-element><a href=text-level-semantics.html#the-wbr-element>wbr</a></code><dt><dfn id=the-template-element-2>The <code>template</code> element</dfn><dd><code id=elements-2:the-template-element><a href=scripting.html#the-template-element>template</a></code><dt><dfn id=raw-text-elements>Raw text elements</dfn><dd><code id=elements-2:the-script-element><a href=scripting.html#the-script-element>script</a></code>, <code id=elements-2:the-style-element><a href=semantics.html#the-style-element>style</a></code><dt><dfn id=escapable-raw-text-elements>Escapable raw text elements</dfn><dd><code id=elements-2:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code>, <code id=elements-2:the-title-element><a href=semantics.html#the-title-element>title</a></code><dt><dfn id=foreign-elements>Foreign elements</dfn><dd>Elements from the <a id=elements-2:mathml-namespace href=https://infra.spec.whatwg.org/#mathml-namespace data-x-internal=mathml-namespace>MathML namespace</a> and the <a id=elements-2:svg-namespace href=https://infra.spec.whatwg.org/#svg-namespace data-x-internal=svg-namespace>SVG namespace</a>.<dt><dfn id=normal-elements>Normal elements</dfn><dd>All other allowed <a id=elements-2:html-elements href=infrastructure.html#html-elements>HTML elements</a> are normal elements.</dl>

  <p><dfn id=syntax-tags>Tags</dfn> are used to delimit the start and end of elements in the
  markup. <a href=#raw-text-elements id=elements-2:raw-text-elements-2>Raw text</a>, <a href=#escapable-raw-text-elements id=elements-2:escapable-raw-text-elements-2>escapable raw text</a>, and <a href=#normal-elements id=elements-2:normal-elements-2>normal</a> elements have
  a <a href=#syntax-start-tag id=elements-2:syntax-start-tag>start tag</a> to indicate where they begin, and an <a href=#syntax-end-tag id=elements-2:syntax-end-tag>end tag</a> to indicate where they end. The start and end tags of
  certain <a href=#normal-elements id=elements-2:normal-elements-3>normal elements</a> can be <a href=#syntax-tag-omission id=elements-2:syntax-tag-omission>omitted</a>, as
  described below in the section on <a href=#syntax-tag-omission id=elements-2:syntax-tag-omission-2>optional tags</a>. Those
  that cannot be omitted must not be omitted. <a href=#void-elements id=elements-2:void-elements-2>Void elements</a> only have a start tag; end
  tags must not be specified for <a href=#void-elements id=elements-2:void-elements-3>void elements</a>. <a href=#foreign-elements id=elements-2:foreign-elements-2>Foreign elements</a> must
  either have a start tag and an end tag, or a start tag that is marked as self-closing, in which
  case they must not have an end tag.</p>

  <p>The <a href=dom.html#concept-html-contents id=elements-2:concept-html-contents>contents</a> of the element must be placed between
  just after the start tag (which <a href=#syntax-tag-omission id=elements-2:syntax-tag-omission-3>might be implied, in certain
  cases</a>) and just before the end tag (which again, <a href=#syntax-tag-omission id=elements-2:syntax-tag-omission-4>might be
  implied in certain cases</a>). The exact allowed contents of each individual element depend on
  the <a href=dom.html#content-models id=elements-2:content-models>content model</a> of that element, as described earlier in
  this specification. Elements must not contain content that their content model disallows. In
  addition to the restrictions placed on the contents by those content models, however, the five
  types of elements have additional <em>syntactic</em> requirements.</p>

  <p><a href=#void-elements id=elements-2:void-elements-4>Void elements</a> can't have any contents (since there's no end tag, no content can be
  put between the start tag and the end tag).</p>

  <p id=template-syntax><a href=#the-template-element-2 id=elements-2:the-template-element-2-2>The <code>template</code> element</a> can have
  <span>template contents</span>, but such <span>template contents</span> are not children of the
  <code id=elements-2:the-template-element-3><a href=scripting.html#the-template-element>template</a></code> element itself. Instead, they are stored in a <code id=elements-2:documentfragment><a data-x-internal=documentfragment href=https://dom.spec.whatwg.org/#interface-documentfragment>DocumentFragment</a></code>
  associated with a different <code>Document</code> — without a <a id=elements-2:browsing-context href=document-sequences.html#browsing-context>browsing context</a> — so
  as to avoid the <code id=elements-2:the-template-element-4><a href=scripting.html#the-template-element>template</a></code> contents interfering with the main <code>Document</code>.
  The markup for the <span>template contents</span> of a <code id=elements-2:the-template-element-5><a href=scripting.html#the-template-element>template</a></code> element is placed
  just after the <code id=elements-2:the-template-element-6><a href=scripting.html#the-template-element>template</a></code> element's start tag and just before <code id=elements-2:the-template-element-7><a href=scripting.html#the-template-element>template</a></code>
  element's end tag (as with other elements), and may consist of any <a href=#syntax-text id=elements-2:syntax-text>text</a>, <a href=#syntax-charref id=elements-2:syntax-charref>character references</a>, <a href=#syntax-elements id=elements-2:syntax-elements>elements</a>, and <a href=#syntax-comments id=elements-2:syntax-comments>comments</a>, but
  the text must not contain the character U+003C LESS-THAN SIGN (&lt;) or an <a href=#syntax-ambiguous-ampersand id=elements-2:syntax-ambiguous-ampersand>ambiguous ampersand</a>.</p>

  <p><a href=#raw-text-elements id=elements-2:raw-text-elements-3>Raw text elements</a> can have <a href=#syntax-text id=elements-2:syntax-text-2>text</a>, though it has <a href=#cdata-rcdata-restrictions>restrictions</a> described below.</p>

  <p><a href=#escapable-raw-text-elements id=elements-2:escapable-raw-text-elements-3>Escapable raw text elements</a> can have <a href=#syntax-text id=elements-2:syntax-text-3>text</a> and
  <a href=#syntax-charref id=elements-2:syntax-charref-2>character references</a>, but the text must not contain an <a href=#syntax-ambiguous-ampersand id=elements-2:syntax-ambiguous-ampersand-2>ambiguous ampersand</a>. There are also <a href=#cdata-rcdata-restrictions>further restrictions</a> described below.</p>

  <p><a href=#foreign-elements id=elements-2:foreign-elements-3>Foreign elements</a> whose start tag is marked as self-closing can't have any contents
  (since, again, as there's no end tag, no content can be put between the start tag and the end
  tag). <a href=#foreign-elements id=elements-2:foreign-elements-4>Foreign elements</a> whose start tag is <em>not</em> marked as self-closing can
  have <a href=#syntax-text id=elements-2:syntax-text-4>text</a>, <a href=#syntax-charref id=elements-2:syntax-charref-3>character
  references</a>, <a href=#syntax-cdata id=elements-2:syntax-cdata>CDATA sections</a>, other <a href=#syntax-elements id=elements-2:syntax-elements-2>elements</a>, and <a href=#syntax-comments id=elements-2:syntax-comments-2>comments</a>, but
  the text must not contain the character U+003C LESS-THAN SIGN (&lt;) or an <a href=#syntax-ambiguous-ampersand id=elements-2:syntax-ambiguous-ampersand-3>ambiguous ampersand</a>.</p>

  <div class=note>

   <p>The HTML syntax does not support namespace declarations, even in <a href=#foreign-elements id=elements-2:foreign-elements-5>foreign
   elements</a>.</p>

   <p>For instance, consider the following HTML fragment:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>svg</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>metadata</c-><c- p>&gt;</c->
   <c- c>&lt;!-- this is invalid --&gt;</c->
   <c- p>&lt;</c-><c- f>cdr:license</c-> <c- e>xmlns:cdr</c-><c- o>=</c-><c- s>&quot;https://www.example.com/cdr/metadata&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;MIT&quot;</c-><c- p>/&gt;</c->
  <c- p>&lt;/</c-><c- f>metadata</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>svg</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>The innermost element, <code>cdr:license</code>, is actually in the SVG namespace, as
   the "<code>xmlns:cdr</code>" attribute has no effect (unlike in XML). In fact, as the
   comment in the fragment above says, the fragment is actually non-conforming. This is because
   <cite>SVG 2</cite> does not define any elements called "<code>cdr:license</code>" in
   the SVG namespace.</p>

  </div>

  <p><a href=#normal-elements id=elements-2:normal-elements-4>Normal elements</a> can have <a href=#syntax-text id=elements-2:syntax-text-5>text</a>, <a href=#syntax-charref id=elements-2:syntax-charref-4>character references</a>, other <a href=#syntax-elements id=elements-2:syntax-elements-3>elements</a>, and <a href=#syntax-comments id=elements-2:syntax-comments-3>comments</a>, but
  the text must not contain the character U+003C LESS-THAN SIGN (&lt;) or an <a href=#syntax-ambiguous-ampersand id=elements-2:syntax-ambiguous-ampersand-4>ambiguous ampersand</a>. Some <a href=#normal-elements id=elements-2:normal-elements-5>normal elements</a>
  also have <a href=#element-restrictions>yet more restrictions</a> on what content they are
  allowed to hold, beyond the restrictions imposed by the content model and those described in this
  paragraph. Those restrictions are described below.</p>

  <p>Tags contain a <dfn id=syntax-tag-name>tag name</dfn>, giving the element's name. HTML
  elements all have names that only use <a href=https://infra.spec.whatwg.org/#ascii-alphanumeric id=elements-2:alphanumeric-ascii-characters data-x-internal=alphanumeric-ascii-characters>ASCII
  alphanumerics</a>. In the HTML syntax, tag names, even those for <a href=#foreign-elements id=elements-2:foreign-elements-6>foreign elements</a>,
  may be written with any mix of lower- and uppercase letters that, when converted to all-lowercase,
  matches the element's tag name; tag names are case-insensitive.</p>


  <h5 id=start-tags><span class=secno>13.1.2.1</span> Start tags<a href=#start-tags class=self-link></a></h5>

  <p><dfn id=syntax-start-tag>Start tags</dfn> must have the following format:</p>

  <ol><li>The first character of a start tag must be a U+003C LESS-THAN SIGN character (&lt;).<li>The next few characters of a start tag must be the element's <a href=#syntax-tag-name id=start-tags:syntax-tag-name>tag name</a>.<li>If there are to be any attributes in the next step, there must first be one or more
   <a id=start-tags:space-characters href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a>.<li>Then, the start tag may have a number of attributes, the <a href=#syntax-attributes id=start-tags:syntax-attributes>syntax for which</a> is described below. Attributes must be
   separated from each other by one or more <a id=start-tags:space-characters-2 href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a>.<li>After the attributes, or after the <a href=#syntax-tag-name id=start-tags:syntax-tag-name-2>tag name</a> if there
   are no attributes, there may be one or more <a id=start-tags:space-characters-3 href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a>. (Some attributes are
   required to be followed by a space. See the <a href=#syntax-attributes id=start-tags:syntax-attributes-2>attributes
   section</a> below.)<li>Then, if the element is one of the <a href=#void-elements id=start-tags:void-elements>void elements</a>, or if the element is a <a href=#foreign-elements id=start-tags:foreign-elements>foreign element</a>, then there may be a single U+002F SOLIDUS
   character (/), which on <a href=#foreign-elements id=start-tags:foreign-elements-2>foreign elements</a> marks the start tag as self-closing. On
   <a href=#void-elements id=start-tags:void-elements-2>void elements</a>, it does not mark the start tag as self-closing but instead is
   unnecessary and has no effect of any kind. For such void elements, it should be used only with
   caution — especially since, if directly preceded by an <a href=#unquoted>unquoted attribute
   value</a>, it becomes part of the attribute value rather than being discarded by the
   parser.<li>Finally, start tags must be closed by a U+003E GREATER-THAN SIGN character (>).</ol>


  <h5 id=end-tags><span class=secno>13.1.2.2</span> End tags<a href=#end-tags class=self-link></a></h5>

  <p><dfn id=syntax-end-tag>End tags</dfn> must have the following format:</p>

  <ol><li>The first character of an end tag must be a U+003C LESS-THAN SIGN character (&lt;).<li>The second character of an end tag must be a U+002F SOLIDUS character (/).<li>The next few characters of an end tag must be the element's <a href=#syntax-tag-name id=end-tags:syntax-tag-name>tag
   name</a>.<li>After the tag name, there may be one or more <a id=end-tags:space-characters href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a>.<li>Finally, end tags must be closed by a U+003E GREATER-THAN SIGN character (>).</ol>


  <h5 id=attributes-2><span class=secno>13.1.2.3</span> Attributes<a href=#attributes-2 class=self-link></a></h5>

  <p><dfn id=syntax-attributes>Attributes</dfn> for an element are expressed inside the
  element's start tag.</p>

  <p>Attributes have a name and a value. <dfn id=syntax-attribute-name>Attribute names</dfn>
  must consist of one or more characters other than <a href=https://infra.spec.whatwg.org/#control id=attributes-2:control data-x-internal=control>controls</a>,
  U+0020 SPACE, U+0022 ("), U+0027 ('), U+003E (>), U+002F (/), U+003D (=), and <a href=https://infra.spec.whatwg.org/#noncharacter id=attributes-2:noncharacter data-x-internal=noncharacter>noncharacters</a>. In the HTML syntax, attribute names, even those for
  <a href=#foreign-elements id=attributes-2:foreign-elements>foreign elements</a>, may be written with any mix of <a href=https://infra.spec.whatwg.org/#ascii-lower-alpha id=attributes-2:lowercase-ascii-letters data-x-internal=lowercase-ascii-letters>ASCII lower</a> and <a href=https://infra.spec.whatwg.org/#ascii-upper-alpha id=attributes-2:uppercase-ascii-letters data-x-internal=uppercase-ascii-letters>ASCII upper alphas</a>.</p>

  <p><dfn id=syntax-attribute-value>Attribute values</dfn> are a mixture of <a href=#syntax-text id=attributes-2:syntax-text>text</a> and <a href=#syntax-charref id=attributes-2:syntax-charref>character references</a>,
  except with the additional restriction that the text cannot contain an <a href=#syntax-ambiguous-ampersand id=attributes-2:syntax-ambiguous-ampersand>ambiguous ampersand</a>.</p>

  <p>Attributes can be specified in four different ways:</p>

  <dl><dt>Empty attribute syntax<dd>
    <p>Just the <a href=#syntax-attribute-name id=attributes-2:syntax-attribute-name>attribute name</a>. The value is implicitly
    the empty string.</p>

    <div class=example>

     <p>In the following example, the <code id=attributes-2:attr-fe-disabled><a href=form-control-infrastructure.html#attr-fe-disabled>disabled</a></code> attribute is
     given with the empty attribute syntax:</p>

     <pre><code class='html'><c- p>&lt;</c-><c- f>input</c-> <em><c- e>disabled</c-></em><c- p>&gt;</c-></code></pre>

    </div>

    <p>If an attribute using the empty attribute syntax is to be followed by another attribute, then
    there must be <a id=attributes-2:space-characters href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a> separating the two.</p>
   <dt id=unquoted>Unquoted attribute value syntax<dd>
    <p>The <a href=#syntax-attribute-name id=attributes-2:syntax-attribute-name-2>attribute name</a>, followed by zero or more
    <a id=attributes-2:space-characters-2 href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a>, followed by a single U+003D EQUALS SIGN character, followed by
    zero or more <a id=attributes-2:space-characters-3 href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a>, followed by the <a href=#syntax-attribute-value id=attributes-2:syntax-attribute-value>attribute value</a>, which, in addition to the requirements
    given above for attribute values, must not contain any literal <a id=attributes-2:space-characters-4 href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a>,
    any U+0022 QUOTATION MARK characters ("), U+0027 APOSTROPHE characters ('), U+003D
    EQUALS SIGN characters (=), U+003C LESS-THAN SIGN characters (&lt;), U+003E GREATER-THAN SIGN
    characters (>), or U+0060 GRAVE ACCENT characters (`), and must not be the empty string.</p>

    


    <div class=example>

     <p>In the following example, the <code id=attributes-2:attr-input-value><a href=input.html#attr-input-value>value</a></code> attribute is given
     with the unquoted attribute value syntax:</p>

     <pre><code class='html'><c- p>&lt;</c-><c- f>input</c-> <em><c- e>value</c-><c- o>=</c-><c- s>yes</c-></em><c- p>&gt;</c-></code></pre>

    </div>

    <p>If an attribute using the unquoted attribute syntax is to be followed by another attribute or
    by the optional U+002F SOLIDUS character (/) allowed in step 6 of the <a href=#syntax-start-tag id=attributes-2:syntax-start-tag>start tag</a> syntax above, then there must be <a id=attributes-2:space-characters-5 href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII
    whitespace</a> separating the two.</p>
   <dt>Single-quoted attribute value syntax<dd>
    <p>The <a href=#syntax-attribute-name id=attributes-2:syntax-attribute-name-3>attribute name</a>, followed by zero or more
    <a id=attributes-2:space-characters-6 href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a>, followed by a single U+003D EQUALS SIGN character, followed by
    zero or more <a id=attributes-2:space-characters-7 href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a>, followed by a single U+0027 APOSTROPHE character
    ('), followed by the <a href=#syntax-attribute-value id=attributes-2:syntax-attribute-value-2>attribute value</a>, which, in
    addition to the requirements given above for attribute values, must not contain any literal
    U+0027 APOSTROPHE characters ('), and finally followed by a second single U+0027 APOSTROPHE
    character (').</p>

    <div class=example>

     <p>In the following example, the <code id=attributes-2:attr-input-type><a href=input.html#attr-input-type>type</a></code> attribute is given
     with the single-quoted attribute value syntax:</p>

     <pre><code class='html'><c- p>&lt;</c-><c- f>input</c-> <em><c- e>type</c-><c- o>=</c-><c- s>&apos;checkbox&apos;</c-></em><c- p>&gt;</c-></code></pre>

    </div>

    <p>If an attribute using the single-quoted attribute syntax is to be followed by another
    attribute, then there must be <a id=attributes-2:space-characters-8 href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a> separating the two.</p>
   <dt>Double-quoted attribute value syntax<dd>
    <p>The <a href=#syntax-attribute-name id=attributes-2:syntax-attribute-name-4>attribute name</a>, followed by zero or more
    <a id=attributes-2:space-characters-9 href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a>, followed by a single U+003D EQUALS SIGN character, followed by
    zero or more <a id=attributes-2:space-characters-10 href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a>, followed by a single U+0022 QUOTATION MARK character
    ("), followed by the <a href=#syntax-attribute-value id=attributes-2:syntax-attribute-value-3>attribute value</a>, which, in
    addition to the requirements given above for attribute values, must not contain any literal
    U+0022 QUOTATION MARK characters ("), and finally followed by a second single U+0022 QUOTATION
    MARK character (").</p>

    <div class=example>

     <p>In the following example, the <code id=attributes-2:attr-fe-name><a href=form-control-infrastructure.html#attr-fe-name>name</a></code> attribute is given with
     the double-quoted attribute value syntax:</p>

     <pre><code class='html'><c- p>&lt;</c-><c- f>input</c-> <em><c- e>name</c-><c- o>=</c-><c- s>&quot;be evil&quot;</c-></em><c- p>&gt;</c-></code></pre>

    </div>

    <p>If an attribute using the double-quoted attribute syntax is to be followed by another
    attribute, then there must be <a id=attributes-2:space-characters-11 href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a> separating the two.</p>
   </dl>

  <p>There must never be two or more attributes on the same start tag whose names are an <a id=attributes-2:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII
  case-insensitive</a> match for each other.</p>

  <hr>

  <p>When a <a href=#foreign-elements id=attributes-2:foreign-elements-2>foreign element</a> has one of the namespaced
  attributes given by the local name and namespace of the first and second cells of a row from the
  following table, it must be written using the name given by the third cell from the same row.</p>

  <table><thead><tr><th> Local name <th> Namespace <th> Attribute name
   <tbody><tr><td> <code>actuate</code> <td> <a id=attributes-2:xlink-namespace href=https://infra.spec.whatwg.org/#xlink-namespace data-x-internal=xlink-namespace>XLink namespace</a> <td> <code>xlink:actuate</code>
    <tr><td> <code>arcrole</code> <td> <a id=attributes-2:xlink-namespace-2 href=https://infra.spec.whatwg.org/#xlink-namespace data-x-internal=xlink-namespace>XLink namespace</a> <td> <code>xlink:arcrole</code>
    <tr><td> <code>href</code> <td> <a id=attributes-2:xlink-namespace-3 href=https://infra.spec.whatwg.org/#xlink-namespace data-x-internal=xlink-namespace>XLink namespace</a> <td> <code>xlink:href</code>
    <tr><td> <code>role</code> <td> <a id=attributes-2:xlink-namespace-4 href=https://infra.spec.whatwg.org/#xlink-namespace data-x-internal=xlink-namespace>XLink namespace</a> <td> <code>xlink:role</code>
    <tr><td> <code>show</code> <td> <a id=attributes-2:xlink-namespace-5 href=https://infra.spec.whatwg.org/#xlink-namespace data-x-internal=xlink-namespace>XLink namespace</a> <td> <code>xlink:show</code>
    <tr><td> <code>title</code> <td> <a id=attributes-2:xlink-namespace-6 href=https://infra.spec.whatwg.org/#xlink-namespace data-x-internal=xlink-namespace>XLink namespace</a> <td> <code>xlink:title</code>
    <tr><td> <code>type</code> <td> <a id=attributes-2:xlink-namespace-7 href=https://infra.spec.whatwg.org/#xlink-namespace data-x-internal=xlink-namespace>XLink namespace</a> <td> <code>xlink:type</code>
    <tr><td> <code>lang</code> <td> <a id=attributes-2:xml-namespace href=https://infra.spec.whatwg.org/#xml-namespace data-x-internal=xml-namespace>XML namespace</a> <td> <code>xml:lang</code>
    <tr><td> <code>space</code> <td> <a id=attributes-2:xml-namespace-2 href=https://infra.spec.whatwg.org/#xml-namespace data-x-internal=xml-namespace>XML namespace</a> <td> <code>xml:space</code>
    <tr><td> <code>xmlns</code> <td> <a id=attributes-2:xmlns-namespace href=https://infra.spec.whatwg.org/#xmlns-namespace data-x-internal=xmlns-namespace>XMLNS namespace</a> <td> <code>xmlns</code>
    <tr><td> <code>xlink</code> <td> <a id=attributes-2:xmlns-namespace-2 href=https://infra.spec.whatwg.org/#xmlns-namespace data-x-internal=xmlns-namespace>XMLNS namespace</a> <td> <code>xmlns:xlink</code>
  </table>

  <p>No other namespaced attribute can be expressed in <a href=#syntax id=attributes-2:syntax>the HTML syntax</a>.</p>

  <p class=note>Whether the attributes in the table above are conforming or not is defined by
  other specifications (e.g. <cite>SVG 2</cite> and <cite>MathML</cite>); this section only
  describes the syntax rules if the attributes are serialized using the HTML syntax.</p>


  <h5 id=optional-tags><span class=secno>13.1.2.4</span> Optional tags<a href=#optional-tags class=self-link></a></h5>

  <p>Certain tags can be <dfn id=syntax-tag-omission>omitted</dfn>.</p>

  <p class=note>Omitting an element's <a href=#syntax-start-tag id=optional-tags:syntax-start-tag>start tag</a> in the
  situations described below does not mean the element is not present; it is implied, but it is
  still there. For example, an HTML document always has a root <code id=optional-tags:the-html-element><a href=semantics.html#the-html-element>html</a></code> element, even if
  the string <code>&lt;html></code> doesn't appear anywhere in the markup.</p>

  
  <p>An <code id=optional-tags:the-html-element-2><a href=semantics.html#the-html-element>html</a></code> element's <a href=#syntax-start-tag id=optional-tags:syntax-start-tag-2>start tag</a> may be omitted
  if the first thing inside the <code id=optional-tags:the-html-element-3><a href=semantics.html#the-html-element>html</a></code> element is not a <a href=#syntax-comments id=optional-tags:syntax-comments>comment</a>.</p>

  <div class=example>

   <p>For example, in the following case it's ok to remove the "<code>&lt;html></code>"
   tag:</p>

   <pre><code class='html'><c- cp>&lt;!DOCTYPE HTML&gt;</c->
<strong><c- p>&lt;</c-><c- f>html</c-><c- p>&gt;</c-></strong>
  <c- p>&lt;</c-><c- f>head</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->Hello<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>head</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>body</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Welcome to this example.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>body</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>html</c-><c- p>&gt;</c-></code></pre>

   <p>Doing so would make the document look like this:</p>

   <pre><code class='html'><c- cp>&lt;!DOCTYPE HTML&gt;</c->

  <c- p>&lt;</c-><c- f>head</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->Hello<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>head</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>body</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Welcome to this example.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>body</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>html</c-><c- p>&gt;</c-></code></pre>

   <p>This has the exact same DOM. In particular, note that whitespace around the <a id=optional-tags:document-element href=https://dom.spec.whatwg.org/#document-element data-x-internal=document-element>document
   element</a> is ignored by the parser. The following example would also have the exact same
   DOM:</p>

   <pre><code class='html'><c- cp>&lt;!DOCTYPE HTML&gt;</c-><c- p>&lt;</c-><c- f>head</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->Hello<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>head</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>body</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Welcome to this example.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>body</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>html</c-><c- p>&gt;</c-></code></pre>

   <p>However, in the following example, removing the start tag moves the comment to before the
   <code id=optional-tags:the-html-element-4><a href=semantics.html#the-html-element>html</a></code> element:</p>

   <pre><code class='html'><c- cp>&lt;!DOCTYPE HTML&gt;</c->
<c- p>&lt;</c-><c- f>html</c-><c- p>&gt;</c->
  <strong><c- c>&lt;!-- where is this comment in the DOM? --&gt;</c-></strong>
  <c- p>&lt;</c-><c- f>head</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->Hello<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>head</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>body</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Welcome to this example.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>body</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>html</c-><c- p>&gt;</c-></code></pre>

   <p>With the tag removed, the document actually turns into the same as this:</p>

   <pre><code class='html'><c- cp>&lt;!DOCTYPE HTML&gt;</c->
<c- c>&lt;!-- where is this comment in the DOM? --&gt;</c->
<small><c- p>&lt;</c-><c- f>html</c-><c- p>&gt;</c-></small>
  <c- p>&lt;</c-><c- f>head</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->Hello<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>head</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>body</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Welcome to this example.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>body</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>html</c-><c- p>&gt;</c-></code></pre>

   <p>This is why the tag can only be removed if it is not followed by a comment: removing the tag
   when there is a comment there changes the document's resulting parse tree. Of course, if the
   position of the comment does not matter, then the tag can be omitted, as if the comment had been
   moved to before the start tag in the first place.</p>

  </div>

  
  <p>An <code id=optional-tags:the-html-element-5><a href=semantics.html#the-html-element>html</a></code> element's <a href=#syntax-end-tag id=optional-tags:syntax-end-tag>end tag</a> may be omitted if
  the <code id=optional-tags:the-html-element-6><a href=semantics.html#the-html-element>html</a></code> element is not immediately followed by a <a href=#syntax-comments id=optional-tags:syntax-comments-2>comment</a>.</p>

  
  <p>A <code id=optional-tags:the-head-element><a href=semantics.html#the-head-element>head</a></code> element's <a href=#syntax-start-tag id=optional-tags:syntax-start-tag-3>start tag</a> may be omitted if
  the element is empty, or if the first thing inside the <code id=optional-tags:the-head-element-2><a href=semantics.html#the-head-element>head</a></code> element is an
  element.</p>

  
  <p>A <code id=optional-tags:the-head-element-3><a href=semantics.html#the-head-element>head</a></code> element's <a href=#syntax-end-tag id=optional-tags:syntax-end-tag-2>end tag</a> may be omitted if
  the <code id=optional-tags:the-head-element-4><a href=semantics.html#the-head-element>head</a></code> element is not immediately followed by <a id=optional-tags:space-characters href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a> or a
  <a href=#syntax-comments id=optional-tags:syntax-comments-3>comment</a>.</p>

  
  <p>A <code id=optional-tags:the-body-element><a href=sections.html#the-body-element>body</a></code> element's <a href=#syntax-start-tag id=optional-tags:syntax-start-tag-4>start tag</a> may be omitted
  if the element is empty, or if the first thing inside the <code id=optional-tags:the-body-element-2><a href=sections.html#the-body-element>body</a></code> element is not
  <a id=optional-tags:space-characters-2 href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a> or a <a href=#syntax-comments id=optional-tags:syntax-comments-4>comment</a>, except if the
  first thing inside the <code id=optional-tags:the-body-element-3><a href=sections.html#the-body-element>body</a></code> element is a <code id=optional-tags:the-meta-element><a href=semantics.html#the-meta-element>meta</a></code>, <code id=optional-tags:the-noscript-element><a href=scripting.html#the-noscript-element>noscript</a></code>,
  <code id=optional-tags:the-link-element><a href=semantics.html#the-link-element>link</a></code>, <code id=optional-tags:the-script-element><a href=scripting.html#the-script-element>script</a></code>, <code id=optional-tags:the-style-element><a href=semantics.html#the-style-element>style</a></code>, or <code id=optional-tags:the-template-element><a href=scripting.html#the-template-element>template</a></code> element.
  </p>

  
  <p>A <code id=optional-tags:the-body-element-4><a href=sections.html#the-body-element>body</a></code> element's <a href=#syntax-end-tag id=optional-tags:syntax-end-tag-3>end tag</a> may be omitted if the
  <code id=optional-tags:the-body-element-5><a href=sections.html#the-body-element>body</a></code> element is not immediately followed by a <a href=#syntax-comments id=optional-tags:syntax-comments-5>comment</a>.</p>

  <div class=example>

   <p>Note that in the example above, the <code id=optional-tags:the-head-element-5><a href=semantics.html#the-head-element>head</a></code> element start and end tags, and the
   <code id=optional-tags:the-body-element-6><a href=sections.html#the-body-element>body</a></code> element start tag, can't be omitted, because they are surrounded by
   whitespace:</p>

   <pre><code class='html'><c- cp>&lt;!DOCTYPE HTML&gt;</c->
<c- p>&lt;</c-><c- f>html</c-><c- p>&gt;</c-><strong>
  </strong><c- p>&lt;</c-><c- f>head</c-><c- p>&gt;</c-><strong>
    </strong><c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->Hello<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c-><strong>
  </strong><c- p>&lt;/</c-><c- f>head</c-><c- p>&gt;</c-><strong>
  </strong><c- p>&lt;</c-><c- f>body</c-><c- p>&gt;</c-><strong>
    </strong><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Welcome to this example.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>body</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>html</c-><c- p>&gt;</c-></code></pre>

   <p>(The <code id=optional-tags:the-body-element-7><a href=sections.html#the-body-element>body</a></code> and <code id=optional-tags:the-html-element-7><a href=semantics.html#the-html-element>html</a></code> element end tags could be omitted without
   trouble; any spaces after those get parsed into the <code id=optional-tags:the-body-element-8><a href=sections.html#the-body-element>body</a></code> element anyway.)</p>

   <p>Usually, however, whitespace isn't an issue. If we first remove the whitespace we don't care
   about:</p>

   <pre><code class='html'><c- cp>&lt;!DOCTYPE HTML&gt;</c-><c- p>&lt;</c-><c- f>html</c-><c- p>&gt;&lt;</c-><c- f>head</c-><c- p>&gt;&lt;</c-><c- f>title</c-><c- p>&gt;</c->Hello<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;&lt;/</c-><c- f>head</c-><c- p>&gt;&lt;</c-><c- f>body</c-><c- p>&gt;&lt;</c-><c- f>p</c-><c- p>&gt;</c->Welcome to this example.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;&lt;/</c-><c- f>body</c-><c- p>&gt;&lt;/</c-><c- f>html</c-><c- p>&gt;</c-></code></pre>

   <p>Then we can omit a number of tags without affecting the DOM:</p>

   <pre><code class='html'><c- cp>&lt;!DOCTYPE HTML&gt;</c-><c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->Hello<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;&lt;</c-><c- f>p</c-><c- p>&gt;</c->Welcome to this example.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>At that point, we can also add some whitespace back:</p>

   <pre><code class='html'><c- cp>&lt;!DOCTYPE HTML&gt;</c->
<c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->Hello<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Welcome to this example.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>This would be equivalent to this document, with the omitted tags shown in their
   parser-implied positions; the only whitespace text node that results from this is the newline at
   the end of the <code id=optional-tags:the-head-element-6><a href=semantics.html#the-head-element>head</a></code> element:</p>

   <pre><code class='html'><c- cp>&lt;!DOCTYPE HTML&gt;</c->
<small><c- p>&lt;</c-><c- f>html</c-><c- p>&gt;&lt;</c-><c- f>head</c-><c- p>&gt;</c-></small><c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->Hello<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
<small><c- p>&lt;/</c-><c- f>head</c-><c- p>&gt;&lt;</c-><c- f>body</c-><c- p>&gt;</c-></small><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Welcome to this example.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-><small><c- p>&lt;/</c-><c- f>body</c-><c- p>&gt;&lt;/</c-><c- f>html</c-><c- p>&gt;</c-></small></code></pre>

  </div>

  
  <p>An <code id=optional-tags:the-li-element><a href=grouping-content.html#the-li-element>li</a></code> element's <a href=#syntax-end-tag id=optional-tags:syntax-end-tag-4>end tag</a> may be omitted if the
  <code id=optional-tags:the-li-element-2><a href=grouping-content.html#the-li-element>li</a></code> element is immediately followed by another <code id=optional-tags:the-li-element-3><a href=grouping-content.html#the-li-element>li</a></code> element or if there is
  no more content in the parent element.</p>

  
  <p>A <code id=optional-tags:the-dt-element><a href=grouping-content.html#the-dt-element>dt</a></code> element's <a href=#syntax-end-tag id=optional-tags:syntax-end-tag-5>end tag</a> may be omitted if the
  <code id=optional-tags:the-dt-element-2><a href=grouping-content.html#the-dt-element>dt</a></code> element is immediately followed by another <code id=optional-tags:the-dt-element-3><a href=grouping-content.html#the-dt-element>dt</a></code> element or a
  <code id=optional-tags:the-dd-element><a href=grouping-content.html#the-dd-element>dd</a></code> element.</p>

  
  <p>A <code id=optional-tags:the-dd-element-2><a href=grouping-content.html#the-dd-element>dd</a></code> element's <a href=#syntax-end-tag id=optional-tags:syntax-end-tag-6>end tag</a> may be omitted if the
  <code id=optional-tags:the-dd-element-3><a href=grouping-content.html#the-dd-element>dd</a></code> element is immediately followed by another <code id=optional-tags:the-dd-element-4><a href=grouping-content.html#the-dd-element>dd</a></code> element or a
  <code id=optional-tags:the-dt-element-4><a href=grouping-content.html#the-dt-element>dt</a></code> element, or if there is no more content in the parent element.</p>

  
  <p>A <code id=optional-tags:the-p-element><a href=grouping-content.html#the-p-element>p</a></code> element's <a href=#syntax-end-tag id=optional-tags:syntax-end-tag-7>end tag</a> may be omitted if the
  <code id=optional-tags:the-p-element-2><a href=grouping-content.html#the-p-element>p</a></code> element is immediately followed by an <code id=optional-tags:the-address-element><a href=sections.html#the-address-element>address</a></code>, <code id=optional-tags:the-article-element><a href=sections.html#the-article-element>article</a></code>,
  <code id=optional-tags:the-aside-element><a href=sections.html#the-aside-element>aside</a></code>, <code id=optional-tags:the-blockquote-element><a href=grouping-content.html#the-blockquote-element>blockquote</a></code>, <code id=optional-tags:the-details-element><a href=interactive-elements.html#the-details-element>details</a></code>, <code id=optional-tags:the-dialog-element><a href=interactive-elements.html#the-dialog-element>dialog</a></code>,
  <code id=optional-tags:the-div-element><a href=grouping-content.html#the-div-element>div</a></code>, <code id=optional-tags:the-dl-element><a href=grouping-content.html#the-dl-element>dl</a></code>, <code id=optional-tags:the-fieldset-element><a href=form-elements.html#the-fieldset-element>fieldset</a></code>, <code id=optional-tags:the-figcaption-element><a href=grouping-content.html#the-figcaption-element>figcaption</a></code>,
  <code id=optional-tags:the-figure-element><a href=grouping-content.html#the-figure-element>figure</a></code>, <code id=optional-tags:the-footer-element><a href=sections.html#the-footer-element>footer</a></code>, <code id=optional-tags:the-form-element><a href=forms.html#the-form-element>form</a></code>, <code id=optional-tags:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>, <code id=optional-tags:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-2><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code>,
  <code id=optional-tags:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-3><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h3</a></code>, <code id=optional-tags:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-4><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h4</a></code>, <code id=optional-tags:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-5><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code>, <code id=optional-tags:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-6><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code>, <code id=optional-tags:the-header-element><a href=sections.html#the-header-element>header</a></code>,
  <code id=optional-tags:the-hgroup-element><a href=sections.html#the-hgroup-element>hgroup</a></code>, <code id=optional-tags:the-hr-element><a href=grouping-content.html#the-hr-element>hr</a></code>, <code id=optional-tags:the-main-element><a href=grouping-content.html#the-main-element>main</a></code>, <code id=optional-tags:the-menu-element><a href=grouping-content.html#the-menu-element>menu</a></code>, <code id=optional-tags:the-nav-element><a href=sections.html#the-nav-element>nav</a></code>,
  <code id=optional-tags:the-ol-element><a href=grouping-content.html#the-ol-element>ol</a></code>, <code id=optional-tags:the-p-element-3><a href=grouping-content.html#the-p-element>p</a></code>, <code id=optional-tags:the-pre-element><a href=grouping-content.html#the-pre-element>pre</a></code>, <code id=optional-tags:the-search-element><a href=grouping-content.html#the-search-element>search</a></code>, <code id=optional-tags:the-section-element><a href=sections.html#the-section-element>section</a></code>,
  <code id=optional-tags:the-table-element><a href=tables.html#the-table-element>table</a></code>, or <code id=optional-tags:the-ul-element><a href=grouping-content.html#the-ul-element>ul</a></code> element, or if there is no more content in the parent
  element and the parent element is an <a href=infrastructure.html#html-elements id=optional-tags:html-elements>HTML element</a> that is not
  an <code id=optional-tags:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code>, <code id=optional-tags:the-audio-element><a href=media.html#the-audio-element>audio</a></code>, <code id=optional-tags:the-del-element><a href=edits.html#the-del-element>del</a></code>, <code id=optional-tags:the-ins-element><a href=edits.html#the-ins-element>ins</a></code>, <code id=optional-tags:the-map-element><a href=image-maps.html#the-map-element>map</a></code>,
  <code id=optional-tags:the-noscript-element-2><a href=scripting.html#the-noscript-element>noscript</a></code>, or <code id=optional-tags:the-video-element><a href=media.html#the-video-element>video</a></code> element, or an <a id=optional-tags:autonomous-custom-element href=custom-elements.html#autonomous-custom-element>autonomous custom
  element</a>.</p>

  <div class=example>

   <p>We can thus simplify the earlier example further:

   <pre><code class='html'><c- cp>&lt;!DOCTYPE HTML&gt;</c-><c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->Hello<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;&lt;</c-><c- f>p</c-><c- p>&gt;</c->Welcome to this example.</code></pre>

  </div>

  
  <p>An <code id=optional-tags:the-rt-element><a href=text-level-semantics.html#the-rt-element>rt</a></code> element's <a href=#syntax-end-tag id=optional-tags:syntax-end-tag-8>end tag</a> may be omitted if the
  <code id=optional-tags:the-rt-element-2><a href=text-level-semantics.html#the-rt-element>rt</a></code> element is immediately followed by an <code id=optional-tags:the-rt-element-3><a href=text-level-semantics.html#the-rt-element>rt</a></code> or <code id=optional-tags:the-rp-element><a href=text-level-semantics.html#the-rp-element>rp</a></code> element,
  or if there is no more content in the parent element.</p>

  
  <p>An <code id=optional-tags:the-rp-element-2><a href=text-level-semantics.html#the-rp-element>rp</a></code> element's <a href=#syntax-end-tag id=optional-tags:syntax-end-tag-9>end tag</a> may be omitted if the
  <code id=optional-tags:the-rp-element-3><a href=text-level-semantics.html#the-rp-element>rp</a></code> element is immediately followed by an <code id=optional-tags:the-rt-element-4><a href=text-level-semantics.html#the-rt-element>rt</a></code> or <code id=optional-tags:the-rp-element-4><a href=text-level-semantics.html#the-rp-element>rp</a></code> element,
  or if there is no more content in the parent element.</p>

  
  <p>An <code id=optional-tags:the-optgroup-element><a href=form-elements.html#the-optgroup-element>optgroup</a></code> element's <a href=#syntax-end-tag id=optional-tags:syntax-end-tag-10>end tag</a> may be omitted
  if the <code id=optional-tags:the-optgroup-element-2><a href=form-elements.html#the-optgroup-element>optgroup</a></code> element  is
  immediately followed by another <code id=optional-tags:the-optgroup-element-3><a href=form-elements.html#the-optgroup-element>optgroup</a></code> element, if it is immediately followed by an
  <code id=optional-tags:the-hr-element-2><a href=grouping-content.html#the-hr-element>hr</a></code> element, or if  there is no more content in the parent
  element.</p>
  

  
  <p>An <code id=optional-tags:the-option-element><a href=form-elements.html#the-option-element>option</a></code> element's <a href=#syntax-end-tag id=optional-tags:syntax-end-tag-11>end tag</a> may be omitted if
  the <code id=optional-tags:the-option-element-2><a href=form-elements.html#the-option-element>option</a></code> element is immediately followed by another <code id=optional-tags:the-option-element-3><a href=form-elements.html#the-option-element>option</a></code> element, if
  it is immediately followed by an <code id=optional-tags:the-optgroup-element-4><a href=form-elements.html#the-optgroup-element>optgroup</a></code> element, if it is immediately followed by
  an <code id=optional-tags:the-hr-element-3><a href=grouping-content.html#the-hr-element>hr</a></code> element, or if there is no more content in the parent element.</p>

  
  <p>A <code id=optional-tags:the-colgroup-element><a href=tables.html#the-colgroup-element>colgroup</a></code> element's <a href=#syntax-start-tag id=optional-tags:syntax-start-tag-5>start tag</a> may be
  omitted if the first thing inside the <code id=optional-tags:the-colgroup-element-2><a href=tables.html#the-colgroup-element>colgroup</a></code> element is a <code id=optional-tags:the-col-element><a href=tables.html#the-col-element>col</a></code> element,
  and if the element is not immediately preceded by another <code id=optional-tags:the-colgroup-element-3><a href=tables.html#the-colgroup-element>colgroup</a></code> element whose
  <a href=#syntax-end-tag id=optional-tags:syntax-end-tag-12>end tag</a> has been omitted. (It can't be omitted if the element
  is empty.)</p>

  
  <p>A <code id=optional-tags:the-colgroup-element-4><a href=tables.html#the-colgroup-element>colgroup</a></code> element's <a href=#syntax-end-tag id=optional-tags:syntax-end-tag-13>end tag</a> may be omitted
  if the <code id=optional-tags:the-colgroup-element-5><a href=tables.html#the-colgroup-element>colgroup</a></code> element is not immediately followed by <a id=optional-tags:space-characters-3 href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a>
  or a <a href=#syntax-comments id=optional-tags:syntax-comments-6>comment</a>.</p>

  
  <p>A <code id=optional-tags:the-caption-element><a href=tables.html#the-caption-element>caption</a></code> element's <a href=#syntax-end-tag id=optional-tags:syntax-end-tag-14>end tag</a> may be omitted if
  the <code id=optional-tags:the-caption-element-2><a href=tables.html#the-caption-element>caption</a></code> element is not immediately followed by <a id=optional-tags:space-characters-4 href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a> or a
  <a href=#syntax-comments id=optional-tags:syntax-comments-7>comment</a>.</p>

  
  <p>A <code id=optional-tags:the-thead-element><a href=tables.html#the-thead-element>thead</a></code> element's <a href=#syntax-end-tag id=optional-tags:syntax-end-tag-15>end tag</a> may be omitted if
  the <code id=optional-tags:the-thead-element-2><a href=tables.html#the-thead-element>thead</a></code> element is immediately followed by a <code id=optional-tags:the-tbody-element><a href=tables.html#the-tbody-element>tbody</a></code> or
  <code id=optional-tags:the-tfoot-element><a href=tables.html#the-tfoot-element>tfoot</a></code> element.</p>

  
  <p>A <code id=optional-tags:the-tbody-element-2><a href=tables.html#the-tbody-element>tbody</a></code> element's <a href=#syntax-start-tag id=optional-tags:syntax-start-tag-6>start tag</a> may be omitted
  if the first thing inside the <code id=optional-tags:the-tbody-element-3><a href=tables.html#the-tbody-element>tbody</a></code> element is a <code id=optional-tags:the-tr-element><a href=tables.html#the-tr-element>tr</a></code> element, and if the
  element is not immediately preceded by a <code id=optional-tags:the-tbody-element-4><a href=tables.html#the-tbody-element>tbody</a></code>, <code id=optional-tags:the-thead-element-3><a href=tables.html#the-thead-element>thead</a></code>, or
  <code id=optional-tags:the-tfoot-element-2><a href=tables.html#the-tfoot-element>tfoot</a></code> element whose <a href=#syntax-end-tag id=optional-tags:syntax-end-tag-16>end tag</a> has been omitted. (It
  can't be omitted if the element is empty.)</p>

  
  <p>A <code id=optional-tags:the-tbody-element-5><a href=tables.html#the-tbody-element>tbody</a></code> element's <a href=#syntax-end-tag id=optional-tags:syntax-end-tag-17>end tag</a> may be omitted if
  the <code id=optional-tags:the-tbody-element-6><a href=tables.html#the-tbody-element>tbody</a></code> element is immediately followed by a <code id=optional-tags:the-tbody-element-7><a href=tables.html#the-tbody-element>tbody</a></code> or
  <code id=optional-tags:the-tfoot-element-3><a href=tables.html#the-tfoot-element>tfoot</a></code> element, or if there is no more content in the parent element.</p>

  
  <p>A <code id=optional-tags:the-tfoot-element-4><a href=tables.html#the-tfoot-element>tfoot</a></code> element's <a href=#syntax-end-tag id=optional-tags:syntax-end-tag-18>end tag</a> may be omitted if
  there is no more content in the parent element.</p>

  
  <p>A <code id=optional-tags:the-tr-element-2><a href=tables.html#the-tr-element>tr</a></code> element's <a href=#syntax-end-tag id=optional-tags:syntax-end-tag-19>end tag</a> may be omitted if the
  <code id=optional-tags:the-tr-element-3><a href=tables.html#the-tr-element>tr</a></code> element is immediately followed by another <code id=optional-tags:the-tr-element-4><a href=tables.html#the-tr-element>tr</a></code> element, or if there is
  no more content in the parent element.</p>

  
  <p>A <code id=optional-tags:the-td-element><a href=tables.html#the-td-element>td</a></code> element's <a href=#syntax-end-tag id=optional-tags:syntax-end-tag-20>end tag</a> may be omitted if the
  <code id=optional-tags:the-td-element-2><a href=tables.html#the-td-element>td</a></code> element is immediately followed by a <code id=optional-tags:the-td-element-3><a href=tables.html#the-td-element>td</a></code> or <code id=optional-tags:the-th-element><a href=tables.html#the-th-element>th</a></code> element,
  or if there is no more content in the parent element.</p>

  
  <p>A <code id=optional-tags:the-th-element-2><a href=tables.html#the-th-element>th</a></code> element's <a href=#syntax-end-tag id=optional-tags:syntax-end-tag-21>end tag</a> may be omitted if the
  <code id=optional-tags:the-th-element-3><a href=tables.html#the-th-element>th</a></code> element is immediately followed by a <code id=optional-tags:the-td-element-4><a href=tables.html#the-td-element>td</a></code> or <code id=optional-tags:the-th-element-4><a href=tables.html#the-th-element>th</a></code> element,
  or if there is no more content in the parent element.</p>

  <div class=example>

   <p>The ability to omit all these table-related tags makes table markup much terser.</p>

   <p>Take this example:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>table</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>caption</c-><c- p>&gt;</c->37547 TEE Electric Powered Rail Car Train Functions (Abbreviated)<c- p>&lt;/</c-><c- f>caption</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>colgroup</c-><c- p>&gt;&lt;</c-><c- f>col</c-><c- p>&gt;&lt;</c-><c- f>col</c-><c- p>&gt;&lt;</c-><c- f>col</c-><c- p>&gt;&lt;/</c-><c- f>colgroup</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>thead</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c->Function<c- p>&lt;/</c-><c- f>th</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c->Control Unit<c- p>&lt;/</c-><c- f>th</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c->Central Station<c- p>&lt;/</c-><c- f>th</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>tr</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>thead</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>tbody</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->Headlights<c- p>&lt;/</c-><c- f>td</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->✔<c- p>&lt;/</c-><c- f>td</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->✔<c- p>&lt;/</c-><c- f>td</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>tr</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->Interior Lights<c- p>&lt;/</c-><c- f>td</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->✔<c- p>&lt;/</c-><c- f>td</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->✔<c- p>&lt;/</c-><c- f>td</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>tr</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->Electric locomotive operating sounds<c- p>&lt;/</c-><c- f>td</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->✔<c- p>&lt;/</c-><c- f>td</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->✔<c- p>&lt;/</c-><c- f>td</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>tr</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->Engineer&apos;s cab lighting<c- p>&lt;/</c-><c- f>td</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;&lt;/</c-><c- f>td</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->✔<c- p>&lt;/</c-><c- f>td</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>tr</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->Station Announcements - Swiss<c- p>&lt;/</c-><c- f>td</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;&lt;/</c-><c- f>td</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->✔<c- p>&lt;/</c-><c- f>td</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>tr</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>tbody</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>table</c-><c- p>&gt;</c-></code></pre>

   <p>The exact same table, modulo some whitespace differences, could be marked up as follows:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>table</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>caption</c-><c- p>&gt;</c->37547 TEE Electric Powered Rail Car Train Functions (Abbreviated)
 <c- p>&lt;</c-><c- f>colgroup</c-><c- p>&gt;&lt;</c-><c- f>col</c-><c- p>&gt;&lt;</c-><c- f>col</c-><c- p>&gt;&lt;</c-><c- f>col</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>thead</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c->Function
   <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c->Control Unit
   <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c->Central Station
 <c- p>&lt;</c-><c- f>tbody</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->Headlights
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->✔
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->✔
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->Interior Lights
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->✔
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->✔
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->Electric locomotive operating sounds
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->✔
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->✔
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->Engineer&apos;s cab lighting
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->✔
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->Station Announcements - Swiss
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->✔
<c- p>&lt;/</c-><c- f>table</c-><c- p>&gt;</c-></code></pre>

   <p>Since the cells take up much less room this way, this can be made even terser by having each
   row on one line:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>table</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>caption</c-><c- p>&gt;</c->37547 TEE Electric Powered Rail Car Train Functions (Abbreviated)
 <c- p>&lt;</c-><c- f>colgroup</c-><c- p>&gt;&lt;</c-><c- f>col</c-><c- p>&gt;&lt;</c-><c- f>col</c-><c- p>&gt;&lt;</c-><c- f>col</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>thead</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c->Function                              <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c->Control Unit     <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c->Central Station
 <c- p>&lt;</c-><c- f>tbody</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->Headlights                            <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->✔                <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->✔
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->Interior Lights                       <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->✔                <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->✔
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->Electric locomotive operating sounds  <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->✔                <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->✔
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->Engineer&apos;s cab lighting               <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->                 <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->✔
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->Station Announcements - Swiss         <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->                 <c- p>&lt;</c-><c- f>td</c-><c- p>&gt;</c->✔
<c- p>&lt;/</c-><c- f>table</c-><c- p>&gt;</c-></code></pre>

   <p>The only differences between these tables, at the DOM level, is with the precise position of
   the (in any case semantically-neutral) whitespace.</p>

  </div>

  <p><strong>However</strong>, a <a href=#syntax-start-tag id=optional-tags:syntax-start-tag-7>start tag</a> must never be
  omitted if it has any attributes.</p>

  <div class=example>

   <p>Returning to the earlier example with all the whitespace removed and then all the optional
   tags removed:</p>

   <pre><code class='html'><c- cp>&lt;!DOCTYPE HTML&gt;</c-><c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->Hello<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;&lt;</c-><c- f>p</c-><c- p>&gt;</c->Welcome to this example.</code></pre>

   <p>If the <code id=optional-tags:the-body-element-9><a href=sections.html#the-body-element>body</a></code> element in this example had to have a <code id=optional-tags:classes><a href=dom.html#classes>class</a></code> attribute and the <code id=optional-tags:the-html-element-8><a href=semantics.html#the-html-element>html</a></code> element had to have a <code id=optional-tags:attr-lang><a href=dom.html#attr-lang>lang</a></code> attribute, the markup would have to become:</p>

   <pre><code class='html'><c- cp>&lt;!DOCTYPE HTML&gt;</c-><c- p>&lt;</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;en&quot;</c-><c- p>&gt;&lt;</c-><c- f>title</c-><c- p>&gt;</c->Hello<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;&lt;</c-><c- f>body</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;demo&quot;</c-><c- p>&gt;&lt;</c-><c- f>p</c-><c- p>&gt;</c->Welcome to this example.</code></pre>

  </div>

  <p class=note>This section assumes that the document is conforming, in particular, that there
  are no <a href=dom.html#content-models id=optional-tags:content-models>content model</a> violations. Omitting tags in the fashion
  described in this section in a document that does not conform to the <a id=optional-tags:content-models-2 href=dom.html#content-models>content models</a>
  described in this specification is likely to result in unexpected DOM differences (this is, in
  part, what the content models are designed to avoid).</p>


  <h5 id=element-restrictions><span class=secno>13.1.2.5</span> Restrictions on content models<a href=#element-restrictions class=self-link></a></h5>

  <p>For historical reasons, certain elements have extra restrictions beyond even the restrictions
  given by their content model.</p>

  <p>A <code id=element-restrictions:the-table-element><a href=tables.html#the-table-element>table</a></code> element must not contain <code id=element-restrictions:the-tr-element><a href=tables.html#the-tr-element>tr</a></code> elements, even though these
  elements are technically allowed inside <code id=element-restrictions:the-table-element-2><a href=tables.html#the-table-element>table</a></code> elements according to the content
  models described in this specification. (If a <code id=element-restrictions:the-tr-element-2><a href=tables.html#the-tr-element>tr</a></code> element is put inside a
  <code id=element-restrictions:the-table-element-3><a href=tables.html#the-table-element>table</a></code> in the markup, it will in fact imply a <code id=element-restrictions:the-tbody-element><a href=tables.html#the-tbody-element>tbody</a></code> start tag before
  it.)</p>

  <p>A single <a href=#syntax-newlines id=element-restrictions:syntax-newlines>newline</a> may be placed immediately after the <a href=#syntax-start-tag id=element-restrictions:syntax-start-tag>start tag</a> of <code id=element-restrictions:the-pre-element><a href=grouping-content.html#the-pre-element>pre</a></code> and <code id=element-restrictions:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code> elements.
  This does not affect the processing of the element. The otherwise optional <a href=#syntax-newlines id=element-restrictions:syntax-newlines-2>newline</a> <em>must</em> be included if the element's contents
  themselves start with a <a href=#syntax-newlines id=element-restrictions:syntax-newlines-3>newline</a> (because otherwise the
  leading newline in the contents would be treated like the optional newline, and ignored).</p>

  <div class=example>
   <p>The following two <code id=element-restrictions:the-pre-element-2><a href=grouping-content.html#the-pre-element>pre</a></code> blocks are equivalent:</p>
   <pre><code class='html'><c- p>&lt;</c-><c- f>pre</c-><c- p>&gt;</c->Hello<c- p>&lt;/</c-><c- f>pre</c-><c- p>&gt;</c-></code></pre>
   <pre><code class='html'><c- p>&lt;</c-><c- f>pre</c-><c- p>&gt;</c-><br>Hello<c- p>&lt;/</c-><c- f>pre</c-><c- p>&gt;</c-></code></pre>
  </div>


  <h5 id=cdata-rcdata-restrictions><span class=secno>13.1.2.6</span> Restrictions on the contents of raw text and escapable raw text elements<a href=#cdata-rcdata-restrictions class=self-link></a></h5>

  <p>The text in <a href=#raw-text-elements id=cdata-rcdata-restrictions:raw-text-elements>raw text</a> and <a href=#escapable-raw-text-elements id=cdata-rcdata-restrictions:escapable-raw-text-elements>escapable raw text
  elements</a> must not contain any occurrences of the string "<code>&lt;/</code>"
  (U+003C LESS-THAN SIGN, U+002F SOLIDUS) followed by characters that case-insensitively match the
  tag name of the element followed by one of U+0009 CHARACTER TABULATION (tab), U+000A LINE FEED
  (LF), U+000C FORM FEED (FF), U+000D CARRIAGE RETURN (CR), U+0020 SPACE, U+003E GREATER-THAN SIGN
  (>), or U+002F SOLIDUS (/).</p>


  <h4 id=text-2><span class=secno>13.1.3</span> Text<a href=#text-2 class=self-link></a></h4>

  <p><dfn id=syntax-text>Text</dfn> is allowed inside elements, attribute values, and comments.
  Extra constraints are placed on what is and what is not allowed in text based on where the text is
  to be put, as described in the other sections.</p>


  <h5 id=newlines><span class=secno>13.1.3.1</span> Newlines<a href=#newlines class=self-link></a></h5>

  <p><dfn id=syntax-newlines>Newlines</dfn> in HTML may be represented either as U+000D
  CARRIAGE RETURN (CR) characters, U+000A LINE FEED (LF) characters, or pairs of U+000D CARRIAGE
  RETURN (CR), U+000A LINE FEED (LF) characters in that order.</p>

  <p>Where <a href=#syntax-charref id=newlines:syntax-charref>character references</a> are allowed, a character
  reference of a U+000A LINE FEED (LF) character (but not a U+000D CARRIAGE RETURN (CR) character)
  also represents a <a href=#syntax-newlines id=newlines:syntax-newlines>newline</a>.</p>


  <h4 id=character-references><span class=secno>13.1.4</span> Character references<a href=#character-references class=self-link></a></h4>

  <p>In certain cases described in other sections, <a href=#syntax-text id=character-references:syntax-text>text</a> may be
  mixed with <dfn id=syntax-charref>character references</dfn>. These can be used to escape
  characters that couldn't otherwise legally be included in <a href=#syntax-text id=character-references:syntax-text-2>text</a>.</p>

  <p>Character references must start with a U+0026 AMPERSAND character (&amp;). Following this,
  there are three possible kinds of character references:</p>

  <dl><dt>Named character references<dd>The ampersand must be followed by one of the names given in the <a id=character-references:named-character-references href=named-characters.html#named-character-references>named character
   references</a> section, using the same case. <dt>Decimal numeric character reference<dd>The ampersand must be followed by a U+0023 NUMBER SIGN character (#), followed by one or more
   <a id=character-references:ascii-digits href=https://infra.spec.whatwg.org/#ascii-digit data-x-internal=ascii-digits>ASCII digits</a>, representing a base-ten integer that corresponds to a code point that
   is allowed according to the definition below. The digits must then be followed by a U+003B
   SEMICOLON character (;).<dt>Hexadecimal numeric character reference<dd>The ampersand must be followed by a U+0023 NUMBER SIGN character (#), which must be followed
   by either a U+0078 LATIN SMALL LETTER X character (x) or a U+0058 LATIN CAPITAL LETTER X
   character (X), which must then be followed by one or more <a id=character-references:ascii-hex-digits href=https://infra.spec.whatwg.org/#ascii-hex-digit data-x-internal=ascii-hex-digits>ASCII hex digits</a>,
   representing a hexadecimal integer that corresponds to a code point that is allowed according to
   the definition below. The digits must then be followed by a U+003B SEMICOLON character (;).</dl>

  <p>The numeric character reference forms described above are allowed to reference any code point
  excluding U+000D CR, <a href=https://infra.spec.whatwg.org/#noncharacter id=character-references:noncharacter data-x-internal=noncharacter>noncharacters</a>, and <a href=https://infra.spec.whatwg.org/#control id=character-references:control data-x-internal=control>controls</a> other than <a id=character-references:space-characters href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a>.</p>

  <p>An <dfn id=syntax-ambiguous-ampersand>ambiguous ampersand</dfn> is a U+0026 AMPERSAND
  character (&amp;) that is followed by one or more <a href=https://infra.spec.whatwg.org/#ascii-alphanumeric id=character-references:alphanumeric-ascii-characters data-x-internal=alphanumeric-ascii-characters>ASCII
  alphanumerics</a>, followed by a U+003B SEMICOLON character (;), where these characters do not
  match any of the names given in the <a id=character-references:named-character-references-2 href=named-characters.html#named-character-references>named character references</a> section.</p>


  <h4 id=cdata-sections><span class=secno>13.1.5</span> CDATA sections<a href=#cdata-sections class=self-link></a></h4>

  <p><dfn id=syntax-cdata>CDATA sections</dfn> must consist of the following components, in
  this order:</p>

  <ol><li>The string "<code>&lt;![CDATA[</code>".<li>Optionally, <a href=#syntax-text id=cdata-sections:syntax-text>text</a>, with the additional restriction that the
   text must not contain the string "<code>]]></code>".<li>The string "<code>]]></code>".</ol>

  <div class=example>

   <p>CDATA sections can only be used in foreign content (MathML or SVG). In this example, a CDATA
   section is used to escape the contents of a <a id=cdata-sections:mathml-ms href=https://w3c.github.io/mathml-core/#string-literal-ms data-x-internal=mathml-ms>MathML <code>ms</code></a> element:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->You can add a string to a number, but this stringifies the number:<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>math</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>ms</c-><c- p>&gt;</c-><c- cp>&lt;![CDATA[x&lt;y]]&gt;</c-><c- p>&lt;/</c-><c- f>ms</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>mo</c-><c- p>&gt;</c->+<c- p>&lt;/</c-><c- f>mo</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>mn</c-><c- p>&gt;</c->3<c- p>&lt;/</c-><c- f>mn</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>mo</c-><c- p>&gt;</c->=<c- p>&lt;/</c-><c- f>mo</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>ms</c-><c- p>&gt;</c-><c- cp>&lt;![CDATA[x&lt;y3]]&gt;</c-><c- p>&lt;/</c-><c- f>ms</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>math</c-><c- p>&gt;</c-></code></pre>

  </div>


  <h4 id=comments><span class=secno>13.1.6</span> Comments<a href=#comments class=self-link></a></h4>

  <p><dfn id=syntax-comments>Comments</dfn> must have the following format:</p>

  <ol><li>The string "<code>&lt;!--</code>".<li>Optionally, <a href=#syntax-text id=comments:syntax-text>text</a>, with the additional restriction that the
   text must not start with the string "<code>></code>", nor start with the string
   "<code>-></code>", nor contain the strings "<code>&lt;!--</code>", "<code>--></code>", or "<code>--!></code>", nor end with the string "<code>&lt;!-</code>".<li>The string "<code>--></code>".</ol>

  <p class=note>The <a href=#syntax-text id=comments:syntax-text-2>text</a> is allowed to end with the string
  "<code>&lt;!</code>", as in <code>&lt;!--My favorite operators are > and
  &lt;!--></code>.</p>




  


  



  


  


  


  


  


  


  


  


  



  <nav><a href=webstorage.html>← 12 Web storage</a> — <a href=index.html>Table of Contents</a> — <a href=named-characters.html>13.2 Named character references →</a></nav>
